{extend name="admin@common/main"/}
{block name="body"}
    <div class="main-title">
        <h2>{:lang("_NAVIGATION_MANAGEMENT_")}</h2>
    </div>

    <div class="with-padding">
    	<div class="">
    		<a href="javascript:" class="btn btn-ajax btn-success add-new">新增导航</a>
    	</div>
        <form action="{:url()}" method="post" class="form-horizontal" >
        <ul class="channel-ul">
        {volist name="list" id="nav"}
        	<li class="clearfix pLi" >
			    <input name="nav[1][sort][]" class="sort" style="display: none" >
			    <div class="pull-left nav_list">

			        <select name="nav[1][type][]" class="form-control nav-type" style="width: 100px;">
			            <option value="cats" {if condition="$nav['cats_title']"}selected{/if}>商品分类</option>
			            <option value="custom" {if condition="!$nav['cats_title']"}selected{/if}>{:lang("_CUSTOM_")}</option>
			        </select>

			        <select name="nav[1][cart_title][]" class="form-control cats" style="width: 100px;{php}if(!$nav['cats_title']){{/php}display:none{php}}{/php}">
			            {php}foreach($cats as $k=>$v){{/php}
			            <option value="{$v.id}" {if condition="strtolower($nav['url']) eq strtolower($v['id'])"}selected{/if}>{$v.title}</option>
			            {php}}unset($k,$v){/php}
			        </select>

			        <input name="nav[1][title][]" placeholder={:lang("_PLEASE_ENTER_THE_TITLE_WITH_DOUBLE_")} class="form-control title" style="width: 100px;" value="{$nav.title}">

			        <input name="nav[1][url][]" placeholder={:lang("_PLEASE_ENTER_A_LINK_WITH_DOUBLE_")} class="form-control url" style="width: 300px;{php}if($nav['cats_title']){{/php}display:none{php}}{/php}" value=" {$nav.url}">

			    </div>

			    <div class='pull-left color-chose' title={:lang("_SELECT_THE_ICON_BACKGROUND_COLOR_WITH_DOUBLE_")}>
			        <input name="nav[1][color][]" class='simple_color_callback' value="{$nav['color']|default='#000000'}"/>
			    </div>
			    <div class='pull-left new-blank ' >
			        <input name="nav[1][target][]" class="target_input" value="{$nav['target']}">
			        <label title={:lang("_THE_NEW_WINDOW_OPENS_WITH_DOUBLE_")} ><input class="target" {if condition="$nav['target'] eq 1"}checked{/if}  type="checkbox" value="1">{:lang("_NEW_WINDOW_OPENS_")}</label>
			    </div>


			    <div class='pull-left i-list'>

			        <a href="javascript:" title={:lang("_ADD_A_NAVIGATION_WITH_DOUBLE_")} class="add-one"><i class="icon icon-plus"></i></a>
			        <a href="javascript:"  title={:lang("_REMOVE_THIS_NAVIGATION_WITH_DOUBLE_")} class="remove-li"><i class="icon icon-remove"></i></a>
			        <a href="javascript:" title={:lang("_ADD_CHILD_NAVIGATION_WITH_DOUBLE_")} class="add-child"><i class="icon icon-sitemap"></i></a>
			        <a href="javascript:" title={:lang("_MOBILE_NAVIGATION_SORT_WITH_DOUBLE_")}><i class="icon icon-move sort-handle-1"></i></a>
			    </div>


			    <div class='pull-left band-text'>
			        <input name="nav[1][band_text][]" class="form-control" placeholder={:lang("_SIGN_POINTS_WITH_DOUBLE_")}  style="width: 100px;" value="{$nav['band_text']}">
			    </div>

			    <div class='pull-left color-chose' title={:lang("_SELECT_THE_FLAG_COLOR_WITH_DOUBLE_")}>
			        <input name="nav[1][band_color][]" class='simple_color_callback' value="{$nav['band_color']|default='#000000'}"/>
			    </div>

			{php}if(isset($nav['child'])){{/php}
			    <div class="clearfix"></div>
			    <ul class="ul-2"  style="display: block;">
			        {volist name="nav['child']" id="child"}
			            <li class="clearfix" >
						    <input name="nav[2][pid][]" class="pid" style="display: none">
						    <input name="nav[2][sort][]" class="sort" style="display: none" >
						    <div class="pull-left nav_list">
						        <select name="nav[2][type][]" class="form-control nav-type" style="width: 100px;">
						            <option value="cats" {if condition="$child['cats_title']"}selected{/if}>商品分类</option>
						            <option value="custom" {if condition="!$child['cats_title']"}selected{/if}>{:lang("_CUSTOM_")}</option>
						        </select>

						        <select name="nav[2][cats][]" class="form-control cats" style="width: 100px;{php}if(!$child['cats_title']){{/php}display:none{php}}{/php}">
						            {php}foreach($cats as $k=>$v){{/php}
						            <option value="{$v.entry}" {if condition="strtolower($child['url']) eq strtolower($v['id'])"}selected{/if}>{$v.title}</option>
						            {php}}unset($k,$v){/php}
						        </select>

						        <input name="nav[2][title][]" placeholder={:lang("_PLEASE_ENTER_THE_TITLE_WITH_DOUBLE_")} class="form-control title" style="width: 100px;" value="{$child.title}">

						        <input name="nav[2][url][]" placeholder={:lang("_PLEASE_ENTER_A_LINK_WITH_DOUBLE_")}  class="form-control url" style="width: 300px;{php}if($child['cats_title']){{/php}display:none{php}}{/php}" value=" {$child.url}">

						    </div>
						    
						    <div class='pull-left color-chose' title={:lang("_SELECT_THE_ICON_BACKGROUND_COLOR_WITH_DOUBLE_")}>
						        <input name="nav[2][color][]" class='simple_color_callback'  value="{$child['color']|default='#000000'}"/>
						    </div>
						    <div class='pull-left new-blank ' >
						        <input name="nav[2][target][]" class="target_input" value="{$child['target']}">
						        <label title={:lang("_THE_NEW_WINDOW_OPENS_WITH_DOUBLE_")} > <input class="target" {if condition="$child['target'] eq 1"}checked{/if} type="checkbox" value="1">{:lang("_NEW_WINDOW_OPENS_")}</label>
						    </div>


						    <div class='pull-left i-list'>

						        <a href="javascript:" title={:lang("_ADD_NAVIGATION_WITH_DOUBLE_")} class="add-two"><i class="icon icon-plus"></i></a>
						        <a href="javascript:" title={:lang("_REMOVE_THIS_NAVIGATION_WITH_DOUBLE_")} class="remove-li"><i class="icon icon-remove"></i></a>
						        <a href="javascript:" title={:lang("_MOBILE_NAVIGATION_SORT_WITH_DOUBLE_")}><i class="icon icon-move sort-handle-2"></i></a>
						    </div>


						    <div class='pull-left band-text'>
						        <input name="nav[2][band_text][]" class="form-control" placeholder={:lang("_SIGN_POINTS_WITH_DOUBLE_")}  style="width: 100px;" value="{$child['band_text']}">
						    </div>

						    <div class='pull-left color-chose' title={:lang("_SELECT_THE_FLAG_COLOR_WITH_DOUBLE_")}>
						        <input name="nav[2][band_color][]" class='simple_color_callback' value="{$child['band_color']|default='#000000'}"/>
						    </div>

						</li>
			        {/volist}
			    </ul>

			 {php}}{/php}
			</li>
        {/volist}
    </ul>

            <div class="form-item with-padding">
                <button class="btn submit-btn ajax-post no-refresh" id="submit" type="submit" target-form="form-horizontal">{:lang("_SURE_WITH_SPACE_")}</button>
                <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">{:lang("_RETURN_WITH_SPACE_")}</button>
            </div>
        </form>
    </div>



<div id="one-nav" class="hide">
    <li class="clearfix pLi" >
        <input name="nav[1][sort][]" class="sort" style="display: none" >
        <div class="pull-left nav_list">
            <select name="nav[1][type][]" class="form-control nav-type" style="width: 100px;">
                <option value="cats" >商品分类</option>
                <option value="custom" >{:lang("_CUSTOM_")}</option>
            </select>

            <select name="nav[1][cats][]" class="form-control cats" style="width: 100px;">
                {php}foreach($cats as $k=>$v){{/php}
                <option value="{$v.id}">{$v.title}</option>
                {php}}unset($k,$v){/php}
            </select>

            <input name="nav[1][title][]" placeholder={:lang("_PLEASE_ENTER_THE_TITLE_WITH_DOUBLE_")} class="form-control title" style="width: 100px;" value="{$cats.0.title}">

            <input name="nav[1][url][]" placeholder={:lang("_PLEASE_ENTER_A_LINK_WITH_DOUBLE_")}  class="form-control url" style="width: 300px;display:none" value="{$cats.0.id}">

        </div>

        <div class='pull-left color-chose' title={:lang("_SELECT_THE_ICON_BACKGROUND_COLOR_WITH_DOUBLE_")}>
            <input  name="nav[1][color][]" class='simple_color_callback' value="#000000"/>
        </div>
        <div class='pull-left new-blank ' >
            <input name="nav[1][target][]" class="target_input" value="0">
            <label title={:lang("_THE_NEW_WINDOW_OPENS_WITH_DOUBLE_")}> <input class="target" type="checkbox" value="1">{:lang("_NEW_WINDOW_OPENS_")}</label>
        </div>


        <div class='pull-left i-list'>
            <a href="javascript:" title={:lang("_ADD_A_NAVIGATION_WITH_DOUBLE_")}  class="add-one"><i class="icon icon-plus"></i></a>
            <a href="javascript:" title={:lang("_REMOVE_THIS_NAVIGATION_WITH_DOUBLE_")} class="remove-li"><i class="icon icon-remove"></i></a>
            <a href="javascript:" title={:lang("_ADD_CHILD_NAVIGATION_WITH_DOUBLE_")} class="add-child"><i class="icon icon-sitemap"></i></a>
            <a href="javascript:" title={:lang("_MOBILE_NAVIGATION_SORT_WITH_DOUBLE_")}><i class="icon icon-move sort-handle-1"></i></a>
        </div>
        <div class='pull-left band-text'>
            <input name="nav[1][band_text][]" class="form-control" placeholder={:lang("_SIGN_POINTS_WITH_DOUBLE_")}  style="width: 100px;" value="">
        </div>
        <div class='pull-left color-chose' title={:lang("_SELECT_THE_FLAG_COLOR_WITH_DOUBLE_")}>
            <input name="nav[1][band_color][]" class='simple_color_callback' value="#000000"/>
        </div>
    </li>
</div>

    <div id="two-nav" class="hide">
        <li class="clearfix" >
            <input name="nav[2][pid][]" class="pid" style="display: none">
            <input name="nav[2][sort][]" class="sort" style="display: none" >
            <div class="pull-left nav_list">

                <select name="nav[2][type][]" class="form-control nav-type" style="width: 100px;">
                    <option value="cats" >商品分类</option>
                    <option value="custom" >{:lang("_CUSTOM_")}</option>
                </select>

                <select name="nav[2][cats][]" class="form-control cats" style="width: 100px;">
                    {php}foreach($cats as $k=>$v){{/php}
                    <option value="{$v.id}"  >{$v.title}</option>
                    {php}}unset($k,$v){/php}
                </select>

                <input name="nav[2][title][]" placeholder={:lang("_PLEASE_ENTER_THE_TITLE_WITH_DOUBLE_")} class="form-control title" style="width: 100px;" value="{$cats.0.title}">

                <input name="nav[2][url][]" placeholder={:lang("_PLEASE_ENTER_A_LINK_WITH_DOUBLE_")}  class="form-control url" style="width: 300px;display:none" value="{$cats.0.id}">

            </div>
            
            <div class='pull-left color-chose' title={:lang("_SELECT_THE_ICON_BACKGROUND_COLOR_WITH_DOUBLE_")}>
                <input name="nav[2][color][]" class='simple_color_callback' value="#000000"/>
            </div>
            <div class='pull-left new-blank ' >
                <input name="nav[2][target][]" class="target_input" value="0">
                <label title={:lang("_THE_NEW_WINDOW_OPENS_WITH_DOUBLE_")}> <input class="target"  type="checkbox" value="1">{:lang("_NEW_WINDOW_OPENS_")}</label>
            </div>

            <div class='pull-left i-list'>

                <a href="javascript:" title={:lang("_ADD_NAVIGATION_WITH_DOUBLE_")}  class="add-two"><i class="icon icon-plus"></i></a>
                <a href="javascript:"  title={:lang("_REMOVE_THIS_NAVIGATION_WITH_DOUBLE_")} class="remove-li"><i class="icon icon-remove"></i></a>

                <a href="javascript:" title={:lang("_MOBILE_NAVIGATION_SORT_WITH_DOUBLE_")}><i class="icon icon-move sort-handle-2"></i></a>
            </div>

            <div class='pull-left band-text'>
                <input name="nav[2][band_text][]" class="form-control" placeholder={:lang("_SIGN_POINTS_WITH_DOUBLE_")}  style="width: 100px;" value="">
            </div>

            <div class='pull-left color-chose' title={:lang("_SELECT_THE_FLAG_COLOR_WITH_DOUBLE_")}>
                <input name="nav[2][band_color][]" class='simple_color_callback' value="#000000"/>
            </div>
        </li>
    </div>
{/block}

{block name="script"}
    <script src="__LIB__/jquery.simple-color/jquery.simple-color.js"></script>
    <script src="__ZUI__/lib/sortable/zui.sortable.min.js"></script>
    <script>
    	$(function () {
		    re_bind();

		})

		var re_bind = function () {

		    change_select();
		    change_cats();
		    fix_form();
		    add_new();
		    add_one();
		    add_two();
		    remove_li();
		    add_child();
		    bind_color();
		    add_flag();
		    target_change()
		}

		var target_change = function(){
		    $('.target').change(function(){
		        $(this).closest('.new-blank').find('.target_input').val($(this).is(':checked')?1:0);
		    })
		}

		var bind_color = function () {
		    $('.simpleColorContainer').remove()
		    $('.simple_color_callback').simpleColor({
		        boxWidth: 15,
		        boxHeight: 15,
		        cellWidth: 15,
		        cellHeight: 15,
		        chooserCSS: { 'z-index': 1200 },
		        displayCSS: { 'border': 0 }
		    });
		}
		var change_select = function () {
		    $('.nav-type').unbind('change')
		    $('.nav-type').change(function () {
		        var obj = $(this);
		        switch (obj.val()) {
		            case 'cats':
		                obj.closest('li>div').children('select.cats').show().change();
		                obj.closest('li>div').children('input.url').hide();
		                break;
		            case 'custom':
		                obj.closest('li>div').children('select.cats').hide();
		                obj.closest('li>div').children('input.url').show();
		                obj.closest('li>div').children('input.title').val('');
		                obj.closest('li>div').children('input.url').val('');
		                break;
		        }
		    })
		}


		var change_cats = function () {
		    $('.cats').unbind('change')
		    $('.cats').change(function () {
		        var obj = $(this);
		        var text = obj.find("option:selected").text();
		        var value = obj.val();
		        obj.closest('li>div').children('input.title').val(text);
		        obj.closest('li>div').children('input.url').val(value);

		        obj.closest('li>div').next().children('select.chosen-icons').attr('data-value','icon-'+obj.find("option:selected").data('icon'));
		        re_bind()
		    })

		}


		var fix_form = function () {
		    $('.channel-ul').sortable({trigger: '.sort-handle-1', selector: 'li', dragCssClass: '',finish:function(){
		        re_bind()
		    }
		    });
		    $('.channel-ul .ul-2').sortable({trigger: '.sort-handle-2', selector: 'li', dragCssClass: '',finish:function(){
		        re_bind()
		    }});

		}
		var add_new = function () {
		    $('.add-new').unbind('click');
		    $('.add-new').click(function () {
		        $('.channel-ul').append($('#one-nav').html());
		        re_bind()
		    })
		}

		var add_one = function () {
		    $('.add-one').unbind('click');
		    $('.add-one').click(function () {
		        $(this).closest('.pLi').after($('#one-nav').html());
		        re_bind()
		    })
		}

		var add_two = function () {
		    $('.add-two').unbind('click');
		    $('.add-two').click(function () {
		        $(this).closest('li').after($('#two-nav').html());
		        re_bind()
		    })
		}


		var remove_li = function () {
		    $('.remove-li').unbind('click');
		    $('.remove-li').click(function () {
		        if( $(this).parents('form').find('.pLi').length > 1){
		            $(this).closest('li').remove()
		            re_bind()
		        }else{
		            updateAlert('不能再减了~');
		        }

		    })
		}


		var add_child = function () {
		    $('.add-child').unbind('click');
		    $('.add-child').click(function () {
		        if ($(this).closest('li').find('.ul-2').length == 0) {
		            $(this).closest('li').append('<div class="clearfix"></div><ul class="ul-2"  style="display: block;"></ul>')
		        }
		        $(this).closest('li').find('.ul-2').prepend($('#two-nav').html());
		        re_bind()
		    })
		}


		var add_flag = function () {
		    $('.channel-ul .pLi').each(function (index, element) {
		        $(this).attr('data-id', index);
		        $(this).find('.sort').val($(this).attr('data-order'));
		    })
		    $('.ul-2 li').each(function (index, element) {
		        $(this).find('.pid').val($(this).parents('.pLi').attr('data-id'));
		        $(this).find('.sort').val($(this).attr('data-order'));
		    })
		}
    </script>
{/block}
